{% extends "admin/base.html" %}
{% block title %}题目管理 - 管理员控制台{% endblock %}

{% block content %}
<div class="container-fluid py-8">
  <!-- 页面头部 -->
  <div class="flex justify-between items-center mb-8">
    <div>
      <h1 class="text-3xl font-bold text-gray-900">题库管理</h1>
      <p class="text-gray-500 mt-2">管理所有题目、测试用例和编译模板</p>
    </div>
    <a href="{{ url_for('create_problem') }}" class="btn btn-primary px-6 py-2">
      <i class="fas fa-plus-circle me-2"></i>创建新题目
    </a>
  </div>

  <!-- 搜索筛选 -->
  <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
    <form method="get" class="flex flex-col md:flex-row gap-4 items-center">
      <div class="flex-grow">
        <div class="relative">
          <input type="text" name="search" placeholder="搜索题目名称/ID..." 
                 class="w-full pl-9 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
          <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"></i>
        </div>
      </div>
      <div class="w-full md:w-auto">
        <select name="difficulty" class="w-full md:w-32 px-3 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500">
          <option value="">所有难度</option>
          <option value="简单" {% if request.args.get('difficulty') == '简单' %}selected{% endif %}>简单</option>
          <option value="中等" {% if request.args.get('difficulty') == '中等' %}selected{% endif %}>中等</option>
          <option value="困难" {% if request.args.get('difficulty') == '困难' %}selected{% endif %}>困难</option>
        </select>
      </div>
      <button type="submit" class="btn btn-primary w-full md:w-auto mt-2 md:mt-0 px-6 py-2">
        <i class="fas fa-filter me-2"></i>筛选
      </button>
    </form>
  </div>

  <!-- 题目列表 -->
  <div class="bg-white rounded-lg shadow-lg overflow-hidden">
    <div class="overflow-x-auto">
      <table class="min-w-full">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">ID</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">标题</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">难度</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">测试用例</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">编译模板</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider w-40">操作</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-200">
          {% for problem in problems %}
          <tr class="hover:bg-gray-50 transition-colors">
            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">{{ problem.id }}</td>
            <td class="px-4 py-3 whitespace-nowrap">
              <div class="text-sm font-medium text-gray-900">{{ problem.title }}</div>
            </td>
            <td class="px-4 py-3 whitespace-nowrap">
              {% if problem.difficulty == '简单' %}
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">简单</span>
              {% elif problem.difficulty == '中等' %}
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">中等</span>
              {% else %}
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">困难</span>
              {% endif %}
            </td>
            <!-- 测试用例列（保持原逻辑，确保调用testcases_count） -->
            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
              {{ problem.testcases_count }}
              {% if problem.testcases_count < 2 %}
                <span class="text-red-500 text-xs ml-1">（至少需要2个）</span>
              {% endif %}
            </td>

            <!-- 编译模板列（保持原逻辑，确保调用has_template） -->
            <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
              {% if problem.has_template %}
                <span class="text-green-500">已设置</span>
              {% else %}
                <span class="text-red-500">未设置</span>
              {% endif %}
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
              <div class="flex space-x-3">
                <a href="{{ url_for('edit_problem', problem_id=problem.id) }}" 
                   class="text-indigo-600 hover:text-indigo-800 transition-colors">
                  <i class="fas fa-edit mr-1"></i>编辑
                </a>
                <a href="{{ url_for('manage_testcases', problem_id=problem.id) }}" 
                  class="text-green-600 hover:text-green-800 transition-colors">
                  <i class="fas fa-file-code mr-1"></i>测试用例
                </a>
                <a href="{{ url_for('edit_template', problem_id=problem.id) }}" 
                   class="text-blue-600 hover:text-blue-800 transition-colors">
                  <i class="fas fa-cogs mr-1"></i>模板
                </a>
                <!-- 删除按钮：绑定全局模态框 + 传递数据 -->
                <a href="#" 
                  class="text-red-600 hover:text-red-800 transition-colors"
                  data-bs-toggle="modal" 
                  data-bs-target="#deleteModal"
                  data-problem-id="{{ problem.id }}"
                  data-problem-title="{{ problem.title }}">
                  <i class="fas fa-trash mr-1"></i>删除
                </a>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <!-- 分页（保留原有逻辑） -->
    {% if pagination and pagination.pages > 1 %}
    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
      <nav class="flex items-center justify-between">
        <!-- 分页代码保持不变 -->
      </nav>
    </div>
    {% endif %}

    <!-- 空状态（保留原有逻辑） -->
    {% if not problems %}
    <div class="p-12 text-center">
      <!-- 空状态代码保持不变 -->
    </div>
    {% endif %}
  </div>

  <!-- 全局删除模态框（需包含 CSRF 令牌） -->
  <div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">确认删除</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          确定要删除题目《<span id="problemTitle">...</span>》吗？
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <form id="deleteForm" method="post" action="">
            <!-- 必须添加 CSRF 令牌 -->
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="btn btn-danger">确认删除</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  document.addEventListener('DOMContentLoaded', () => {
    // 1. 初始化全局模态框
    const deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
    
    // 2. 监听所有删除按钮的点击事件
    document.querySelectorAll('[data-bs-target="#deleteModal"]').forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.preventDefault(); // 阻止默认跳转行为
        
        // 3. 提取自定义数据
        const problemId = btn.getAttribute('data-problem-id');
        const problemTitle = btn.getAttribute('data-problem-title');
        
        // 4. 动态更新模态框内容
        document.getElementById('problemTitle').textContent = problemTitle;
        document.getElementById('deleteForm').action = `/admin/problems/delete/${problemId}`;
        
        // 5. 显示居中模态框
        deleteModal.show();
      });
    });
  });
</script>
{% endblock %}